<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				
				border: 1px solid red;
			}
			
			
			#div1{
				height: 200px;
				width: 200px;
			}
			#div2{
				height: 100px;
				width: 100px;
			}
			#div3{
				
				height: 50px;
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">这是div2</div>
			div1
		</div>
		//
		<a href="javascript:void(0);" id="node_a">删除子节点</a>
		<a href="javascript:void(0);" id="node_b">添加子节点</a>
		
		<script>
			//删除div2子节点
			var node_a=document.getElementById("node_a");
			node_a.onclick=function(){
				var div1=document.getElementById("div1");
				var div2=document.getElementById("div2");
				div1.removeChild(div2);
			}
			
			//添加div3子节点
			var node_b=document.getElementById("node_b");
			node_b.onclick=function(){
				var div1=document.getElementById("div1");
				var div3=document.createElement("div");
				//让这里的div3设置为<stylt>div3中的属性
				div3.setAttribute("id","div3");
				div1.appendChild(div3);
				
			}
			
			
			
			
			
		</script>
		
		
	</body>
</html>